<template>
  <div :style="{ background: 'white', padding: '0 10px', marginTop: '30px'}">
    <div class="table-operator">
      <a-row :gutter="24">
        <a-col :md="8">
          <div class="table-operator">
            <span style="font-size: 20px">采购清单</span>
            <!-- <a-button
              type="primary"
              icon="plus"
              style="margin-left: 20px"
              @click="productAdd">关联合同</a-button> -->
          </div>
        </a-col>
        <a-col :md="8">
        </a-col>
        <a-col :md="8">
          <a-button type="primary" @click="() => { $emit('submitAll') }">全部交付</a-button>
          <span style="margin-right: 30px;font-size: 18px; font-weight: bold; float: right">总金额: {{ money }}</span>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-spin :spinning="loading">
        <a-table
          ref="productTable"
          size="default"
          rowKey="goodsId"
          :style="{ background: 'white'}"
          :columns="buyListColumns1"
          :dataSource="buyLists"
          style=" overflow-x: auto !important"
          :pagination="false">
          <span
            slot="serial"
            slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span
            slot="action"
            slot-scope="text, record">
            <template>
              <a v-if="listsubmit" @click="handleDelivery(record)">交付</a>
            </template>
          </span>
        </a-table>
      </a-spin>
    </div>
    <buy-list-form
      ref="productModal"
      :visible="visible"
      :suppliers="suppliers"
      :loading="confirmLoading"
      @cancel="handleCancel"
      @ok="handleOk" />
  </div>
</template>

<script>
// getGoodsList, saveGoods, updateGoods, deleteGoods
import { updateGoods, supplierInfo } from '@/api/manage'
import { buyListColumns1 } from './config'
import { STable } from '@/components'
import BuyListForm from './BuyListForm'
import { Modal, message } from 'ant-design-vue'

export default {
  name: 'BuyList',
  props: {
    contractInfo: {
      type: Object,
      default: null
    },
    buyLists: {
      type: Array,
      default: null
    },
    dealBuyLists: {
      type: Array,
      default: null
    },
    loading: {
      type: Boolean,
      default: null
    },
    money: {
      type: Number,
      default: 0
    },
    listsubmit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    STable,
    BuyListForm
  },
  data () {
    this.buyListColumns1 = buyListColumns1
    return {
      isAdd: false,
      isEdit: false,
      visible: false,
      suppliers: undefined,
      confirmLoading: false,
      products: undefined,
      prorecord: undefined,
      goods: undefined,
      values: undefined
    }
  },
  created () {},
  mounted () {
    // this.$refs.productTable.refresh()
    this.projectId = this.contractInfo.projectId
    // this.loading = true
    // getGoodsSelect({ type: 3, projectId: this.projectId }).then(res => {
    //   this.products = res.data
    //   this.loading = false
    // })
    supplierInfo({ page: 1, limit: 9999 }).then(res => {
      this.suppliers = res.data
    })
  },
  methods: {
    handleDelivery (record) {
      this.visible = true
      this.isEdit = true
      this.isAdd = false
      const form = this.$refs.productModal.form
      this.goods = record
      this.$nextTick(() => {
        form.setFieldsValue(record, { supplierId: Number(record.supplierId) })
      })
    },
    productAdd () {
      this.visible = true
      this.isAdd = true
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs.productModal.form.setFieldsValue({ type: 2 })
      })
    },
    // handleEdit (record) {
    //   this.visible = true
    //   this.isEdit = true
    //   this.isAdd = false
    //   const form = this.$refs.productModal.form
    //   this.goods = record
    //   this.$nextTick(() => {
    //     form.setFieldsValue(record)
    //   })
    // },
    handleDelete (record) {
      Modal.confirm({
        title: '删除采购清单',
        content: '删除后数据不再展示，需要查看请联系开发',
        onOk: () => {
          // this.loading = true
          // deleteGoods({ goodsId: record.goodsId }).then(() => {
          //   message.success('删除成功')
          //   getGoodsSelect({ type: 2, contractId: this.contractId }).then(res => {
          //     this.products = res.data
          //     this.loading = false
          //   })
          // })
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$refs.productModal.form.resetFields()
    },
    handleDeal () {
      this.confirmLoading = true
      let goodsId = 0
      for (const item of this.dealBuyLists) {
        if (item.relationId === this.goods.goodsId) {
          goodsId = item.goodsId
          break
        }
      }

      // 新增一条 type 为 4的记录， goodsId 要为 type = 4 的goodsId
      const pro1 = () =>
        updateGoods(
          Object.assign({}, this.values, {
            relationId: this.goods.goodsId,
            submitCount: undefined,
            type: 4,
            count: this.values.submitCount,
            goodsType: this.goods.goodsType,
            goodsId
          })
        )
      // type 为3 的交付修改
      // const pro2 = () => updateGoods(Object.assign({}, this.values, { submitCount: undefined, type: 3, count: this.values.count - this.values.submitCount, contractId: this.goods.contractId, goodsId: this.goods.goodsId }))
      if (goodsId) {
        return pro1().then(() => {
          this.confirmLoading = false
          this.visible = false
        })
      } else {
        message.error('交付失败，没找对对应记录')
        // eslint-disable-next-line prefer-promise-reject-errors
        return Promise.reject('not found record')
      }
    },
    handleOk () {
      const form = this.$refs.productModal.form
      form.validateFields((errors, values) => {
        if (!errors) {
          this.values = values
          this.$emit('ok')
        }
      })
    },
    tableCustomRow (record, index) {
      return {
        on: {
          click: event => {
            this.prorecord = record
          }
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-scroll {
  overflow: auto;
  overflow-x: auto !important;
}
</style>
